<template>
    <div class="eagle-check">
        <van-checkbox :name="name" v-model="checked" @change="handleChange" :disabled="disabled" :shape="shape">{{this.label}}</van-checkbox>
    </div>
</template>
<script>
export default{
    name:"eagle-check",
    props:{
        name:{},
        label: {
            type: String,
            default() {
                return "";
            },
        },
        value: {
            type: String | Number,
            default() {
                return null;
            },
        },
        disabled: {
            type: Boolean,
            default() {
                return false;
            },
        },
        required: {
            type: [Boolean],
            default() {
                return false;
            },
        },
        shape:{
            type: String,
            default() {
                return "square";
            },
        }
    },
    data() {
        return {
            checked: this.value,
        };
    },
    watch:{
        value(newvalue, oldvalue) {
            this.checked = this.value;
        },
    },
    methods:{
        handleChange() {
            
            this.$emit("input", this.checked);
            this.$emit("change", this.checked);
        },
    }
}
</script>
<style lang="less" scoped>
.eagle-check{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
</style>